<template>
  <view class="myWrap">
    <topCommonTitleBar
      class="topBar"
      positionType="relative"
      arrow="white"
			backgroundColor="#e93d2f"
      titleColor="#333333"
    >
    </topCommonTitleBar>
    <scroll-view class="mt-scroll" scroll-y="true">
      <image
        class="code_bj_img"
        src="/static/img/my/vip/code_bj_icon.png"
        mode="scaleToFill"
      />
      <view class="user-vip">
        <view class="vip-avatar">
          <image
            class="avatar-img"
            :src="userInfo.avatar"
            mode="aspectFill"
          ></image>
          <view class="vip-text">
            <text class="text-name">
              {{ userInfo.nickname }}
            </text>
            <text v-if="userInfo.is_wenda_vip == 1" class="text-vip">
              月度会员（{{ userInfo.wenda_vip_end_time_text }}到期）
            </text>
            <text v-if="userInfo.is_wenda_vip == 2" class="text-vip">
              季度会员（{{ userInfo.wenda_vip_end_time_text }}到期）
            </text>
            <text v-if="userInfo.is_wenda_vip == 3" class="text-vip">
              年度会员（{{ userInfo.wenda_vip_end_time_text }}到期）
            </text>
            <text
              v-if="userInfo.is_wenda_vip == 0 && userInfo.is_99vip == 0"
              class="text-vip"
            >
              您当前未开通任何会员
            </text>
            <text
              v-if="userInfo.is_wenda_vip == 0 && userInfo.is_99vip == 1"
              class="text-vip 99vip"
            >
              99VIP会员
            </text>
          </view>
        </view>
        <view class="vip-discount" @click="toChangeCode">
          <image class="discount-img" src="/static/img/my/vip/code_icon.png">
          </image>
          <text class="discount-text">兑换码</text>
        </view>
      </view>
      <view class="vip-category">
        <view class="package-wrap">
          <view class="vip_title">购买会员</view>
					<!-- scroll- :scroll-x="true" -->
          <view class="package-list" >
            <view
              class="package-item"
              v-for="(item, index) in vipList"
              :key="index"
            >
              <rich-text class="type" :nodes="item.name"></rich-text>
              <view class="num">
                <text class="icon fz40">¥</text>
                <text class="fz56 bold">{{ item.price }}</text>
              </view>
              <view class="vip_tips">{{ item.name }}内免费提问</view>
              <view class="just_need">{{ item.only }}</view>
              <view class="openVip" @click="openVipPopup(item, 1)"
                >立即开通</view
              >
            </view>
          </view>
        </view>
      </view>

      <view class="ticket">
        <view class="ticket_title">购买单次问答券</view>
        <view class="normal">
          <view class="normal_title">普通问答</view>
          <view class="normal_ticket">
            <view
              class="normal_item"
              v-for="(item, index) in normalTicketList"
              :key="index"
            >
              <image
                class="normal_img"
                src="/static/img/my/vip/normal_icon.png"
                mode="scaleToFill"
              />
              <view class="ticket_num">
                {{ item.unitprice }}<text class="fs35">元</text>x<text
                  class="fs35"
                  >{{ item.number }}张</text
                >
              </view>
              <view class="ticket_price">
                <view class="price"
                  ><text class="symbol">￥</text>{{ item.price }}</view
                >
                <view class="price1">立省￥{{ item.preferential }}</view>
                <view class="buy_btn" @click="openVipPopup(item, 2)">购买</view>
              </view>
            </view>
          </view>
        </view>

        <view class="expert">
          <view class="expert_title">专家问答</view>
          <view class="expert_tips"
            >一分钟接单 <text class="dot"></text> 专家解答
            <text class="dot"></text> 专项解答</view
          >
          <view class="expert_ticket">
            <view
              class="normal_item"
              v-for="(item, index) in expertTicketList"
              :key="index"
            >
              <image
                class="normal_img"
                src="/static/img/my/vip/expert_icon.png"
                mode="scaleToFill"
              />
              <view class="ticket_num">
                {{ item.unitprice }}<text class="fs35">元</text>x<text
                  class="fs35"
                  >{{ item.number }}张</text
                >
              </view>
              <view class="ticket_price">
                <view class="price"
                  ><text class="symbol">￥</text>{{ item.price }}</view
                >
                <view class="price1">立省￥{{ item.preferential }}</view>
                <view class="buy_btn" @click="openVipPopup(item, 2)">购买</view>
              </view>
            </view>
          </view>
        </view>
        <view class="bottom" style="height: 100rpx"></view>
      </view>
    </scroll-view>

    <!-- 购买弹窗 -->
    <view v-if="showBuyVip">
      <u-popup
        :show="showBuyVip"
        mode="bottom"
        round="30rpx"
        :closeable="true"
        @close="closeBuyVip"
      >
        <view class="showBuyVip">
          <view class="title">确认信息</view>
          <view class="content" v-if="openPopupType == 1">
            <view class="vip_info">
              <view class="info_left">
                <view class="vip_name"
                  >会员{{
                    chooseItem.id == 1
                      ? "月卡"
                      : chooseItem.id == 2
                      ? "季卡"
                      : "年卡"
                  }}
                </view>
                <view class="vip_old_price"
                  >无折扣价<text class="price">{{
                    chooseItem.old_price
                  }}</text></view
                >
              </view>
              <view class="info_right">
                <view class="vip_price">{{ chooseItem.price }}元</view>
                <view class="info_tips">{{ chooseItem.only }}</view>
              </view>
            </view>
            <view class="line">
              <view class="line_dot dot1"></view>
              <view class="line_dot dot2"></view>
            </view>
            <view class="vip_policy" v-html="chooseItem.remark"> </view>
          </view>
          <view class="content" v-if="openPopupType == 2">
            <view class="vip_info">
              <view class="info_left">
                <view class="vip_name"
                  >{{ chooseItem.type == 2 ? "专家问答" : "普通问答"
                  }}{{ chooseItem.number }}张
                </view>
                <view class="vip_old_price"
                  >无折扣价<text class="price">{{
                    chooseItem.preferential + Number(chooseItem.price)
                  }}</text></view
                >
              </view>
              <view class="info_right">
                <view class="vip_price">{{ chooseItem.price }}元</view>
                <view class="info_tips"
                  >立省{{ chooseItem.preferential }}元</view
                >
              </view>
            </view>
            <view class="line">
              <view class="line_dot dot1"></view>
              <view class="line_dot dot2"></view>
            </view>
            <view class="vip_policy">
              1、使用期限一年 <br />
              2、仅限问答使用
            </view>
          </view>

          <view class="buy_btn" @click="goPayMoney(chooseItem)">确认支付</view>
          <view class="xiyi" v-if="openPopupType == 1">
            <!-- <checkbox-group class="radios" @change="checkFun">
              <checkbox :checked="checked"></checkbox>
            </checkbox-group> -->
            <text class="text">开通前请阅读</text>
            <text @click="openVipXiYi">《会员服务协议》</text>
          </view>
        </view>
      </u-popup>
    </view>
  </view>
</template>

<script
  type="text/javascript"
  src="plus-confusion://../pages/my/vip/index"
></script>

<style lang="scss" scoped>
@import "./index.scss";
</style>
